<template>
	<view class="container">
		<!-- <u-navbar :is-back="false" title="" :background="background">
			<view class="">
				<u-icon name="map"></u-icon>
				<text>贵州省</text>
			</view>
		</u-navbar> -->
		<!-- <u-navbar back-text="返回" title="剑未配妥，出门已是江湖"></u-navbar> -->
		<!-- swiper box -->
		<view class="wrap">
			<u-swiper :list="swiperListData" height="262"></u-swiper>
		</view>
		<!-- 栏目列表-->
		<view class="good-icon-box">
			<view class="column-top-box" v-for="(columnItem,index) in columnList" :key="index"
				@click="toPagePath(columnItem)">
				<image class="column-img" :src="columnItem.columnUrl" mode=""></image>
				<text>{{columnItem.columnTitle}}</text>
			</view>
		</view>
		<!-- 热门榜单 -->
		<view class="">
			<view class="hot-title-box">
				<u-cell-item icon="pause" title="热门榜单"></u-cell-item>
			</view>
			<view class="">
				<scroll-view scroll-x="true">
					<view style="display: flex;">
						<view class="hot-box" v-for="(hotItem,index) in travelListData" :key="index" v-if="index <6" @click="toTravelPage(hotItem)">
							<view class="hot-item-box">
								<u-lazy-load class="wh-100" :image="getImg(hotItem.picture)"></u-lazy-load>
								<view class="hot-item-text-box flex-jc-ac-fc wh-100">
									<text class="text-36-ffffff-b line-1">{{hotItem.title}}</text>
									<view class="hot-jies-box">
										<text class="text-16-ffffff">{{hotItem.touristRating}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 热点资讯 -->
		<view class="">
			<view class="">
				<u-cell-item style="margin-top: 0;" icon="pause" title="热点资讯"></u-cell-item>
			</view>
			<view class="zixun-box">
				<view class="zixun-list flex-js-ac" v-for="(zixunItem,index) in newsListData" :key="index" @click="toDetail(zixunItem)">
					<view class="zixun-list-box flex-j-sb-as-fc">
						<text class="line-2 text-28-161616">{{zixunItem.title}}</text>
						<view class="zixun-bottom-zz">
							<text class="text-18-A4A4A4">{{zixunItem.source}}</text>
							<text class="text-18-A4A4A4">{{zixunItem.source}}</text>
						</view>
					</view>
					<image :src="getImg(zixunItem.titlePic)" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl:"",
				background: {
					// backgroundColor: '#001f3f',

					// 导航栏背景图
					background: 'url(../../../static/003.gif) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',

					// 渐变色
					// backgroundImage: 'linear-gradient(45deg, rgb(89, 170, 177), rgb(128, 176, 253))'
				},
				list: [],
				columnList: [{
						columnUrl: require("../../../static/icon/indexColumn/1.png"),
						columnTitle: "文化",
						pagePath: "/pages/home/culture/culture",
					},
					{
						columnUrl: require("../../../static/icon/indexColumn/2.png"),
						columnTitle: "旅游",
						pagePath: "/pages/home/travel/travel",
					},
					{
						columnUrl: require("../../../static/icon/indexColumn/3.png"),
						columnTitle: "产业",
						pagePath: "/pages/home/industry/industry",
					},
					{
						columnUrl: require("../../../static/icon/indexColumn/4.png"),
						columnTitle: "资讯",
						pagePath: "/pages/home/news/news",
					}
				],
				travelListData:[],
				newsListData:[],
				swiperListData:[],
			}
		},
		onLoad() {
			this.imageUrl = this.$imgUrl;
			this._initSendtravel();
			this._initSendNews();
			this._initSendSwiper();
		},
		methods: {
			// 跳转到旅游详情页
			toTravelPage(e){
				uni.navigateTo({
					url:"/pages/home/travel/travelDetail?id="+e.id+"&title="+e.title
				})
			},
			// 跳转到新闻详情页
			toDetail(e){
				uni.navigateTo({
					url:"/pages/home/news/news-detail?id="+e.id
				})
			},
			
			// 首页轮播图
			async _initSendSwiper() {
				let SwiperData = await this.$myRequest({
					url: '/rural-revitalization/rtc/flashview/list',
					method: "GET",
				})
				console.log(SwiperData)
				if(SwiperData.code == 200){
					for (let swiperItem in SwiperData.result.records) {
						SwiperData.result.records[swiperItem].image = SwiperData.result.records[swiperItem].imageUrl
					}
					this.swiperListData = SwiperData.result.records;
					console.log(this.swiperListData)
					
					console.log(SwiperData.result.records)
				}else{
					// uni.showToast({
					// 	title:
					// })
				}
			},
			
			// 新闻资讯榜单
			async _initSendNews() {
				let news = await this.$myRequest({
					url: '/rural-revitalization/rtc/hotspotInformation/list',
					method: "GET",
				})
				console.log(news)
				if(news.code == 200){
					this.newsListData = news.result.records;
					console.log(news.result.records)
				}else{
					console.log(index)
				}
			},
			// 旅游榜单
			async _initSendtravel() {
				let travel = await this.$myRequest({
					url: '/rural-revitalization/rtc/travelDetails/list',
					method: "GET",
				})
				console.log(travel)
				if(travel.code == 200){
					this.travelListData = travel.result.records;
					// console.log(travel.result.records)
				}else{
					console.log(travel)
				}
			},
			
			toPagePath(e) {
				let path = e.pagePath;
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}

	.wrap {
		// margin-left: 20rpx;
		// margin-right: 20rpx;

		background-color: #558EE7;
	}
	.hot-jies-box{
		background-color: #000000;
		opacity: 0.1;
	}

	.good-icon-box {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(1, 1fr);
		row-gap: 20rpx;
		align-items: center;
	}

	.column-top-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.column-img {
		height: 90rpx;
		width: 90rpx;
		margin-top: 58rpx;
	}

	.column-top-box>text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0F0F0F;
		margin-top: 20rpx;
	}

	.index-column-all-box {
		grid-column: 1/5;
		height: 105rpx;
		border: 2rpx solid #000000;
		border-radius: 10rpx;
		margin-left: 60rpx;
		margin-right: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.index-column-all-box> :nth-child(1) {
		margin-left: 42rpx;
		margin-right: 42rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0F0F0F;
	}

	.index-column-all-box> :nth-child(2) {
		margin-left: 42rpx;
		margin-right: 42rpx;
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #0F0F0F;
	}

	.hot-title-box {
		padding-bottom: 10rpx;
	}

	.hot-box {
		display: flex;
		margin-left: 25rpx;
	}

	.hot-item-box {
		position: relative;
		height: 271rpx;
		width: 216rpx;
	}

	.hot-item-text-box {
		position: absolute;
		top: 0;
		left: 0;
	}

	.zixun-box {
		margin-top: 10rpx;
	}

	.zixun-list {
		margin-bottom: 20rpx;
	}

	.zixun-list-box {
		height: 122rpx;
		margin-left: 25rpx;
		margin-right: 25rpx;
		flex: 1;
	}

	.zixun-list>image {
		height: 142rpx;
		width: 235rpx;
		margin-right: 25rpx;
	}

	.zixun-bottom-zz>text:nth-of-type(1) {
		margin-right: 40rpx;
		opacity: 0.5;
	}

	.zixun-bottom-zz>text:nth-of-type(2) {
		opacity: 0.5;
	}
</style>
